<template>
	<div class="container-div" style="width=100%">
		<div class="app-container" style="padding: 20px">
			<a-row :gutter="24">
				<a-col :span="4">
					<a-input-search style="margin-top: 14px" placeholder="Search" />
					<a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
						<template #title="{ key: treeKey, title }">
							<a-dropdown :trigger="['contextmenu']">
								<span>{{ title }}</span>
								<template #overlay>
									<a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
										<a-menu-item key="1">1st menu item</a-menu-item>
										<a-menu-item key="2">2nd menu item</a-menu-item>
										<a-menu-item key="3">3rd menu item</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</template>
					</a-tree>
				</a-col>
				<!-- 查询表格 -->
				<a-col :span="20">
					<a-form layout="inline">
						<div style="margin-top: 10px">
							<a-form-item label="用户名/昵称">
								<a-input placeholder="请输入" />
							</a-form-item>

							<a-form-item label="手机号码">
								<a-input placeholder="请输入" />
							</a-form-item>

							<a-form-item label="状态">
								<a-input placeholder="请选择">
									<a-select-option value="0">正常</a-select-option>
									<a-select-option value="1">禁用</a-select-option>
								</a-input>
							</a-form-item>

							<a-form-item label="创建时间">
								<a-range-picker @change="rangePicker" />
							</a-form-item>
							<span>
								<a-button style="margin-top: 4px" @click="handleSearch" type="primary">搜索</a-button>
								<a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
							</span>
						</div>
					</a-form>
				</a-col>
				<!-- 按钮 -->
				<a-col :span="20">
					<div style="margin: 10px 0px; padding-left: 0px">
						<a-button type="primary" @click="showModal" ghost>新增</a-button>
						<a-modal v-model="visible" width="800px" title="添加用户" footer="">
							<create-form />
						</a-modal>
						<a-button type="primary" @click="showModal" ghost style="margin-left: 10px">修改</a-button>
						<a-button type="danger" @click="batchDelete" ghost style="margin-left: 10px">删除</a-button>
						<a-button type="primary" @click="importExcelHandleOpen" ghost style="margin-left: 10px">导入</a-button>
						<a-button type="primary" @click="handleExport" ghost style="margin-left: 10px">导出</a-button>
					</div>
				</a-col>
				<a-col :span="20">
					<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
						<a-col :gutter="8" :span="24">
							<a-form-item label="创建时间">
								<a-range-picker @change="rangePicker" />
							</a-form-item>
						</a-col>
						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="status" slot-scope="text, record">
							<a-popconfirm ok-text="是" cancel-text="否" @confirm="confirmHandleStatus(record)" @cancel="cancelHandleStatus(record)">
								<span slot="title"
									>确认<b>{{ record.status === '1' ? '启用' : '停用' }}</b
									>名称为:{{ record.nickName }}的用户吗?</span
								>
								<a-switch checked-children="开" un-checked-children="关" :checked="record.status == 0" />
							</a-popconfirm>
						</span>

						<span slot="action" slot-scope="text, record">
							<!-- <a @click="$refs.showModal.show(record)">编辑</a> -->
							<a @click="showModal">修改</a>
							<a-divider type="vertical" />
							<a @click="handleDelete(record)">删除</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
								<a-menu slot="overlay">
									<a-menu-item>
										<a href="javascript:;" @click="resetPwd">重置密码</a>
									</a-menu-item>
									<a-menu-item>
										<a href="javascript:;" v-if="record.userId !== 1">删除</a>
									</a-menu-item>
								</a-menu>
							</a-dropdown>
						</span>
					</a-table>
				</a-col>
			</a-row>
		</div>
	</div>
</template>

<script>
import { DatePicker } from 'ant-design-vue';

import CreateForm from './components/CreateForm.vue';
// 定义树形控件数据
const treeData = [
	{
		title: '若依科技',
		key: '0-0',
		children: [
			{
				title: '深圳总公司',
				key: '0-0-0',
				children: [
					{ title: '研发部门', key: '0-0-0-0' },
					{ title: '市场部门', key: '0-0-0-1' },
					{ title: '测试部门', key: '0-0-0-2' },
					{ title: '财务部门', key: '0-0-0-3' },
					{ title: '运维部门', key: '0-0-0-4' },
				],
			},
			{
				title: '长沙分公司',
				key: '0-0-1',
				children: [
					{ title: '市场部门', key: '0-0-1-0' },
					{ title: '财务部门', key: '0-0-1-1' },
				],
			},
		],
	},
];
const columns = [
	{
		title: '用户编号',
		dataIndex: 'userId',
		align: 'center',
		scopedSlots: { customRender: 'userId' },
	},
	{
		title: '用户名',
		align: 'center',
		dataIndex: 'userName',
	},
	{
		title: '用户名称',
		align: 'center',
		dataIndex: 'nickName',
	},
	{
		title: '部门',
		align: 'center',
		dataIndex: 'deptName',
	},
	{
		title: '手机号码',
		align: 'center',
		dataIndex: 'phonenumber',
	},
	{
		title: '状态',
		dataIndex: 'status',
		scopedSlots: { customRender: 'status' },
	},
	{
		title: '创建时间',
		width: '150',
		align: 'center',
		dataIndex: 'createTime',
	},
	{
		title: '操作',
		width: '150',
		align: 'center',
		dataIndex: 'action',
		scopedSlots: { customRender: 'action' },
	},
];
const data = [
	{
		key: '1',
		userId: '1',
		userName: 'admin',
		nickName: '若依',
		deptName: '部门',
		phonenumber: '15888888898',
		status: '',
		createTime: '2022-02-02 12:23:23',
		action: '',
	},
	{
		key: '2',
		userId: '2',
		userName: 'ry',
		nickName: '若依',
		deptName: '测试部门',
		phonenumber: '1588888898',
		status: '',
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '3',
		userId: '3',
		userName: '依',
		nickName: 'ruoyi',
		deptName: '研发部门',
		phonenumber: '15888888987',
		status: '',
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	// {
	// 	key: '4',
	// 	name: 'Disabled User',
	// 	age: 99,
	// 	address: 'Sidney No. 1 Lake Park',
	// },
];
const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows);
	},
};
export default {
	data() {
		return {
			visible: false,
			treeData,
			expandedKeys: ['0-0-0', '0-0-1'],
			data,
			rowSelection,
			expandedRowKeys: [],
			columns,
		};
	},
	queryParam: {
		// status: '0'
	},
	computed: {},
	methods: {
		ok(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},

		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		resetPwd() {
			console.log('reset');
		},
		// 表单重置
		reset() {
			this.form = {
				roleId: undefined,
				roleName: undefined,
				roleKey: undefined,
				roleSort: 0,
				status: '0',
				deptIds: [],
				deptCheckStrictly: true,
				remark: undefined,
			};
		},
		// 搜索按钮
		async handleSearch() {
			console.log('sousuo');
		},

		/** 修改按钮操作 */
		handleUpdate() {
			console.log('edit');
			this.reset();
			// const postId = row.postId || this.ids;
			// getPost(postId).then((response) => {
			// this.form = response.data;
			// this.open = true;
			// this.title = '修改岗位';
			// });
		},
		// 重置
		handleReset() {
			console.log('reset');
		},
		// 新增按钮显示
		showModal() {
			this.visible = true;
		},

		handleRemove() {
			console.log('this.handleRemove');
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			console.log('shanchuyilie');
			const userId = row.userId;
			const that = this;
			this.$confirm({
				title: '警告',
				content: `真的要删除 用户编号为${userId}的数据项吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				// onOk() {
				// 	delConfig(configId).then((response) => {
				// 		if (response.code === 200) {
				// 			that.$message.success('删除成功!');
				// 			that.getList();
				// 		} else {
				// 			that.$message.error(response.msg);
				// 		}
				// 	});
				// },
			});
		},
		// 批量删除
		batchDelete(ids) {
			const that = this;
			this.$confirm({
				title: '系统提示',
				content: `是否确认删除编号用户为  ${ids.length} 位用户吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				onOk() {},
			});
		},
		// 导入导出excel
		importExcelHandleOpen() {
			console.log('daoru');
		},
		/** 导出按钮操作 */
		handleExport() {
			console.log('daochu');
			// this
			// 	.download
			// 'system/user/export',
			// {
			// 	...this.queryParams,
			// },
			// `user_${new Date().getTime()}.xlsx`
			// ();
		},
		// 搜索框中的日期选择
		rangePicker() {
			console.log('' + DatePicker);
			// this.queryParam.params = {};
			// this.queryParam.params['beginTime'] = dateString[0];
			// this.queryParam.params['endTime'] = dateString[1];
		},
		/* 任务状态修改 */
		confirmHandleStatus() {
			console.log(23343);
		},
		cancelHandleStatus() {
			console.log('sudishfcd');
		},
	},
	components: { CreateForm },
};
</script>
<style scoped lang="scss">
.container-div {
	width: 100%;
}
.app-container {
	padding: 20px;
}
</style>
